<template>
  <div>
    <hry-header title="银行卡管理" :showBackBtn="true">
      <a-icon
        type="plus"
        slot="action"
        @click="$commonJs.goPage('personAddCard')"
      />
      <div slot="content" class="wrapper">
        <md-notice-bar mode="closable" icon="volumn" type="activity" scrollable>
          尊敬的用户，信用卡功能因政策原因已停用。
        </md-notice-bar>
        <div class="empty" v-if="cardList.length === 0">
          <img src="@/assets/img/empty.png" alt="" />
        </div>
        <bank-list
          v-for="(item, index) in cardList"
          ref="bankList"
          :cardItem="item"
          :key="index"
          @delCard="delCard"
        ></bank-list>
      </div>
    </hry-header>
  </div>
</template>

<script>
import { NoticeBar } from "mand-mobile";

export default {
  name: "mobile",
  components: {
    [NoticeBar.name]: NoticeBar,
    hryHeader: () => import("@/components/contentWrapper/index"),
    bankList: () => import("@/components/person/bankList")
  },
  data() {
    return {
      cardList: []
    };
  },
  methods: {
    getCardList() {
      this.$ajax
        .post(this.$api.getCardList)
        .then(res => {
          this.cardList = res.data.list;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    delCard(id) {
      this.$ajax
        .post(this.$api.delCard, { id: id })
        .then(() => {
          this.getCardList();
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getCardList();
  }
};
</script>

<style scoped lang="less">
.wrapper {
}
</style>
